<template>
<div>
    <h3>方向：竖向</h3>
    <div class="flex row" >
        <p>1..</p>
        <p>2..</p>
        <p>3..</p>
        <p>4..</p>
        <p>5..</p>
        <p>6..</p>
        <p>7..</p>
        <p>8..</p>
        <p>9..</p>
    </div>
    <br/>
    <h3>方向：横向</h3>
    <div class="flex col">
        <p>1..</p>
        <p>2..</p>
        <p>3..</p>
        <p>4..</p>
        <p>5..</p>
        <p>6..</p>
        <p>7..</p>
        <p>8..</p>
        <p>9..</p>
    </div>
</div>
</template>

<style scoped>
.flex{
    display: flex;
    background: #03A9F4;
    width: 100px;
    height: 100px;
    color: black;
}
.row{
    flex-direction: column;
    flex-wrap: wrap;
}
.col{
    flex-wrap: wrap;
}
.flex p{
    background:#FFEB3B;
    margin: 2px;
}
</style>